import { t } from 'i18next'
import React from 'react'
import LabelRadioGroup from '../components/LabelRadioGroup'
import { IPersonalConfig } from '@/api/personalConfig/interface'
import { IAction } from '../interface'
import { useGlobalStore } from '@/store/global'
import shallow from 'zustand/shallow'
import { checkPermission } from '@/utils'

interface DefaultSettingProps {
	configInfo: IPersonalConfig
	propsChange: ({ type, payLoad }: IAction) => void
}
/*
组件的使用
<DefaultSetting configInfo={personalConfigInfo} propsChange={dispatch}></DefaultSetting>
*/
export default function DefaultSetting({ configInfo, propsChange }: DefaultSettingProps) {
	const { user, SWITCH } = useGlobalStore((state) => ({ user: state.user, SWITCH: state.SWITCH }), shallow)
	const defaultInfo = [
		{
			curVal: configInfo.home_type,
			mainTitle: t('我的主页'),
			subTitle: t('默认主页设置'),
			value: 'HomeType',
			radioList: [
				checkPermission('10000000', SWITCH.homeTab) && { label: t('会议日程'), value: 1 },
				checkPermission('01000000', SWITCH.homeTab) && { label: t('会场管理'), value: 3 },
				checkPermission('00100000', SWITCH.homeTab) &&
					user?.enable_meeting && { label: t('虚拟会议室'), value: 2 },
				checkPermission('00010000', SWITCH.homeTab) && { label: t('会议模板'), value: 4 },
			].filter(Boolean) as { label: string; value: number }[],
		},
		{
			curVal: configInfo.monitor_type,
			mainTitle: t('会议监控'),
			subTitle: t('窗口设置'),
			value: 'MonitorType',
			radioList: [
				{ label: t('默认收起'), value: 1 },
				{ label: t('默认展开'), value: 2 },
			],
			hide: !user?.enable_venue_monitor || !SWITCH.monitor,
		},
		{
			curVal: configInfo.mt_portrait_type,
			mainTitle: t('终端头像'),
			subTitle: t('显示类型'),
			value: 'MtPortraitType',
			radioList: [
				{ label: t('头像'), value: 1 },
				{ label: t('静态图标'), value: 2 },
			],
		},
		{
			curVal: configInfo.roll_call_type,
			mainTitle: t('点名轮询被点名轮询图像预览'),
			subTitle: t('图像显示设置'),
			value: 'RollCallType',
			radioList: [
				{ label: t('仅当前被点名人'), value: 1 },
				{ label: t('当前被点名人和下一个被点名人'), value: 2, width: 220 },
			],
			hide: !SWITCH.monitor,
		},
		{
			curVal: configInfo.mt_order_type,
			mainTitle: t('与会方显示方式'),
			subTitle: t('默认设置'),
			value: 'MtOrderType',
			className: 'mt_order_type__i18n',
			radioList: [
				{ label: t('呼叫顺序'), value: 1 },
				{ label: t('在离线顺序'), value: 2 },
				{ label: t('组织架构'), value: 3 },
			],
		},
	]
	const handleChange = (val: number, type: string) => {
		propsChange({ type: `set${type}`, payLoad: val } as IAction)
	}
	return (
		<div>
			{defaultInfo.map((item, index) => {
				return item.hide ? (
					/*
					# <> 与 React.Fragment 的区别

					<> 是 React.Fragment 的简写标签。它允许我们对元素列表进行分组，而无需将它们包装到新节点中。
					
					建议：基本上，我们应该在任何时候使用 React.Fragment 或 <>，
					它可以避免不必要的 div 包装器，得到一个更加清晰的标签结构。

					所以我们可以这样做：
					```
					return (
						<>
							<Header />
							<Navigation />
							<Main />
							<Footer />
						</>
					)
					```
					它们之间唯一的区别是简写版本不支持 key 属性。

					以下是在多行字符串中插入新行(br)标签的常见示例：
					```tsx
					{
					str.split('\\n').map((item, index) => {
						return (
							<Fragment key={index}>
								{item}
								<br />
							</Fragment>
						)
					})
					}
					```

					*/
					<React.Fragment key={index}></React.Fragment>
				) : (
					<LabelRadioGroup
						key={index}
						className={item.className || ''}
						mainTitle={item.mainTitle}
						subTitle={item.subTitle}
						list={item.radioList}
						value={item.curVal}
						changeValue={(val) => handleChange(val, item.value)}
					></LabelRadioGroup>
				)
			})}
		</div>
	)
}
